<template>
    <div>
        <div class="shade" @touchmove.prevent v-show="show">
            <div class="shade-box">
                <div class="item" :class="{ active: index == item.id }" @click="shade(item.id)" v-for="item in list" :key="item.id">{{ item.name }}</div>
            </div>
        </div>
        <div class="head">
            <span class="iconfont icon-arrow-left-bold" @click="gotoUp"></span>
            <div class="title">录播课程</div>
            <div class="screen" @click="shw">筛选</div>
        </div>
        <div class="box">
            <van-tabs v-model="active">
                <littleblack :height="10" :background="color"></littleblack>
                <van-tab title="全部">
                    <div class="item" v-if="index == 1">
                        <listtab v-for="item in arr" :key="item.id" :item="item"></listtab>
                    </div>
                    <div class="item" v-else-if="index == 2">
                        <listtab v-for="item in h5" :key="item.id" :item="item"></listtab>
                    </div>
                    <div class="item" v-else-if="index == 3">
                        <listtab v-for="item in afterend" :key="item.id" :item="item"></listtab>
                    </div>
                    <div class="item" v-else-if="index == 4">
                        <listtab v-for="item in android" :key="item.id" :item="item"></listtab>
                    </div>
                    <div class="item" v-else-if="index == 5">
                        <listtab v-for="item in man" :key="item.id" :item="item"></listtab>
                    </div>
                </van-tab>
                <van-tab title="免费">
                    <div class="item" v-if="index == 1">
                        <listtab v-for="item in whitegive" :key="item.id" :item="item"></listtab>
                    </div>
                    <div class="item" v-else-if="index == 2">
                        <listtab v-for="item in h5mf" :key="item.id" :item="item"></listtab>
                    </div>
                    <div class="item" v-else-if="index == 3">
                        <listtab v-for="item in afterendmf" :key="item.id" :item="item"></listtab>
                    </div>
                    <div class="item" v-else-if="index == 4">
                        <listtab v-for="item in androidmf" :key="item.id" :item="item"></listtab>
                    </div>
                    <div class="item" v-else-if="index == 5">
                        <listtab v-for="item in manmf" :key="item.id" :item="item"></listtab>
                    </div>
                </van-tab>
            </van-tabs>
        </div>
    </div>
</template>

<script>
import Vue from "vue";
import { Tab, Tabs } from "vant";
Vue.use(Tab).use(Tabs);
import littleblack from "@/components/LittleBlack.vue";
import listtab from "@/components/ListTab.vue";
export default {
    data() {
        return {
            index: 1,
            active: 2,
            color: "#F3F6F9",
            arr: [],
            whitegive: [],
            show: false,
            list: [
                { id: 1, name: "全部" },
                { id: 2, name: "前端开发" },
                { id: 3, name: "后端开发" },
                { id: 4, name: "移动开发" },
                { id: 5, name: "人工智能 " },
            ],
            //前端
            h5: [],
            h5mf: [],
            //后端
            afterend: [],
            afterendmf: [],
            //移动
            android: [],
            androidmf: [],
            //人工
            man: [],
            manmf: [],
        };
    },
    methods: {
        gotoUp() {
            this.$router.go(-1);
        },
        shw() {
            this.show = true;
        },
        shade(id) {
            this.index = id;
            this.show = false;
        },
    },
    async created() {
        let res = await this.$request.get("/api/v2/courses", {
            params: {
                page: 1,
                page_size: 500,
                category_id: 0,
            },
        });
        this.arr = res.data.data;
        let give = await this.$request.get("/api/v2/courses", {
            params: {
                page: 1,
                page_size: 500,
                scene: "free",
                category_id: 0,
            },
        });
        this.whitegive = give.data.data;
        //免费数据
        this.whitegive.forEach((item) => {
            //后端开发
            if (item.category.id == 3) {
                this.androidmf.push(item);
            } else if (item.category.id == 2) {
                this.afterendmf.push(item);
            } else if (item.category.id == 1) {
                this.h5mf.push(item);
            } else if (item.category.id == 4) {
                this.manmf.push(item);
            }
        });
        // 全部数据
        this.arr.forEach((item) => {
            //后端开发
            if (item.category.id == 3) {
                this.android.push(item);
            } else if (item.category.id == 2) {
                this.afterend.push(item);
            } else if (item.category.id == 1) {
                this.h5.push(item);
            } else if (item.category.id == 4) {
                this.man.push(item);
            }
        });
    },
    components: {
        littleblack,
        listtab,
    },
};
</script>

<style lang="less" scoped>
/deep/ .van-tab {
    flex: none;
    width: 48px;
}

/deep/ .van-tabs__wrap {
    height: 50px;
}

/deep/ .van-tabs__nav {
    padding: 0 15px;
    z-index: 999;
}

/deep/ .van-tabs__line {
    bottom: 25px;
    width: 0px;
    height: 0px;
    background: transparent;
    border-radius: 0;
}

/deep/ .van-tab--active {
    span {
        font-weight: 600;
        color: #3ca7fa;
    }
}

.shade {
    position: absolute;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(22, 22, 22, 0.8);
    z-index: 9999;
    .shade-box {
        position: absolute;
        top: 30px;
        right: 0;
        z-index: 10080;
        width: 166px;
        padding: 0 15px;
        border-radius: 5px;
        background-color: #fff;
        .item {
            padding: 0;
            width: 100%;
            font-size: 14px;
            color: #333;
            line-height: 40px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            &.active {
                color: #3ca7fa;
                font-weight: 700;
            }
        }
    }
}

.head {
    position: fixed;
    top: 0;
    width: 100%;
    height: 50px;
    background-color: #fff;
    z-index: 100;
    padding-left: 15px;
    padding-right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    span {
        font-size: 19px;
        position: absolute;
        top: 50%;
        margin-top: -10px;
        left: 4%;
    }
    .title {
        flex: 1;
        font-size: 17px;
        font-weight: 500;
        text-align: center;
        color: #333;
        line-height: 22px;
        overflow: hidden;
    }
    .screen {
        height: 22px;
        position: relative;
        padding-right: 10px;
    }
}

.box {
    margin-top: 50px;
}

.item {
    padding: 15px;
}
</style>
